<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素水平居中-相对定位</title>
    <style>
        .box1 {
            width: 600px;
            height: 600px;
            background-color: #bfa;
        }
        .box2 {
            width: 500px;
            height: 500px;
            background-color: yellow;
            position: absolute;
            top: 100px;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: orange;

            position: relative;
            margin-left: auto;
            margin-right: auto;
        }
    /*
    相对定位 总结：
        1. 子元素开启相对定位，则确定了其包含块就是其父元素(如果父元素是非块元素，则往父级找块元素作为包含块)
        2. margin-left和margin-right设置为auto，表示在水平布局中会通过调整margin-left和margin-right两个值来促使下面的等式成立：
            包含块内容区宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right;
    */
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>
</html>